<template>
  <div class="serch-box">
    <div class="row">
      <div class="left">
        <el-icon><Search /></el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="right">
        <el-button  @click="reset" >重置把keyword置空即可</el-button>
        <el-button type="primary" plain @click="queryUserList" >查询搜索</el-button>
      </div>
    </div>
    <div class="row">
      <span class="title">账号/姓名</span>
      <el-input v-model="queryParams.keyword"  placeholder="请输入账号/姓名"  ></el-input>
    </div>
  </div>

  <!-- 添加账号 showDialog = true 改变变量值为true就是现实弹窗   "'addUser'"表示字符串  这样后端传入的数据没有addUser权限的就不显示添加用户这个按钮 其他按钮同理 -->
   <!--v-permission="'addUser'" 按钮级别的权限控制，自定义指定  -->
  <div class="add-area">
    <el-button type="primary"  
    @click="showDialog = true " 
    v-permission="'addUser'"
    >添加用户</el-button>
  </div>
  <!-- align="center" 居中   switch必须在后端接口中有status这个字段表示  回传状态   引用其他组件就要用插槽-->
  <div class="table-box">
      <el-table :data="roleList" border :total="100" :stripe="true"  table-layout="auto" cell-class-name="align-c">

      <el-table-column label="序号" prop="id" width="80px" align="center" />
      <el-table-column label="角色名称" prop="roleName"  align="center" />
      <el-table-column label="描述" prop="description"  align="center" />
      <el-table-column label="用户数" prop="adminCount"  align="center" />
      <el-table-column label="创建时间" prop="createTime" align="center">
        <template #default="{ row }">
          {{ formateDate(row.createTime) }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="登陆时间" prop="loginTime" align="center" /> -->
      <el-table-column label="是否启用" prop="status" width="120px" align="center" >
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="switchStatus(row)"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button 
          size="small" 
          type="primary"
          @click="allocRoleHandle(row.id)"
          v-permission="'allocRole'">
            分配菜单
          </el-button>
          <el-button 
          size="small" 
          type="success"
          @click="EditRole(row.id)"
          v-permission="'editUser'"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--查看elmentplus文档发 分页 current-page当前是第几页  page-size每页显示多少条数据 total数据总数 current-change当前页码改变的回调  -->
    <!-- total数据总量 后端处理 这里默认设置400   size-change事件page-sizes的选择：绑定请求就可以拿到   el-config-provider 国际化 -->
      <!-- <div class="demonstration">All combined</div> -->
    <el-config-provider :locale="zhCn">
      <el-pagination class="el-pagination"
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="queryUserList"
      @current-change="queryUserList"
      />
    </el-config-provider>
  </div>
  <!--  -->
    <!-- dialog弹窗    hide： 自定义事件 然后传递给子组件   :id="editId"  然后在子组件edituser中的defineProps中拿到-->
  <addUser :show="showDialog" @hide="closeDialog" :id="editId"/>
  <!-- 分配角色的dialog -->
  <allocateRole :show="showAllocRole" :id="allocId" @hide="hideAllocRole"/>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
//导入封装的请求后端数据的api   G:\giteeOmss\omss\omss\src\views\ums\api\index.ts
import { getRoleListApi,changeStatusApi } from './api';
//国际化
import { ElConfigProvider, ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
//导入时间格式化方法
import { formateDate } from '@/utils/index'
//导入添加用户的组件
import  addUser from './components/editUser.vue'
//导入分配角色的组件
import allocateRole from './components/allocRole.vue'



//分配角色部分 布尔类型的变量  名称尽量语义化
const showAllocRole = ref(false); //控制分配角色的弹窗显示隐藏
const allocId = ref(0);  //定义一个响应式数据  用来子组件通信
//功能明显是要显示 就正常方法名  动词+名词
const allocRoleHandle = (id: number) => {
  showAllocRole.value = true;
  allocId.value = id;  //把editId赋值 为1  通过 :id="editId"事件传递给子组件
};
//自定义事件  是否刷新数据
const hideAllocRole = () => {
  showAllocRole.value = false;
  allocId.value = 0;
};

//编辑的部分
const editId = ref(0);  //定义一个响应式数据  用来子组件通信
const editName = ref<string>(); //定义一个响应式数据  用来子组件通信
const editDescription = ref<string>(); //定义一个响应式数据  用来子组件通信
const editUser = (id:number,name:string,description:string) => {   //传入id并且约束 
  // 把 editUser 组件显示出来
  showDialog.value = true;
   //  建议可以直接传个对象进去  
  //需要把id传递给子组件editUser
  editId.value = id;  //把editId赋值 为1  通过 :id="editId"事件传递给子组件
  console.log('这里是编辑的方法'+ editId.value)
  editName.value = name;
  editDescription.value = description;
}





//定义添用户的弹窗也就是Dialog
const showDialog = ref(false);
// 打开弹窗的方法
// const openDialog = () => {
//   showDialog.value = true;
// }
// 关闭弹窗的方法 自定义事件  添加一个传参，传一个boolean，也可以不传值 
const closeDialog  = (isReload?:boolean) => {
  // 通过设置计算属性传递给子组件 来触发 emit
  showDialog.value = false;
  editId.value = 0;
  //isReload表示是否需要刷新数据
  if (isReload) queryUserList();
  //确认后在此请求获取用户列表的接口去刷新数据
  // queryUserList();
}


//更改状态的方法 
//默认只能拿到status  这里还需要拿到id。 传参需要id和status 所以直接用封装的约束：G:\giteeOmss\omss\omss\src\types\user.d.ts
const switchStatus = (row:IUserModel)=>{   
  console.log('这里是更改状态的方法'+ row.id,row.status)
  //开始调用后端接口
  changeStatusApi(row.id!,row.status).then((res)=>{  //因为约束有时候没数据 所以这! 表示不存在没有数据的情况 只针对这里
    if (res.code === 200){
      ElMessage.success('修改成功！');
    }else{
      ElMessage.error('修改失败！');
      //重新获取数据并且赋值  这里重新修改约束的数据类型 参考获取用户列表的数据类型
      row.status = row.status === 1 ? 0 : 1;
    }
  })
  .catch(()=>{
    row.status = row.status === 1 ? 0 : 1;
  })
}


const handleEdit = (id: number) => {
  console.log(id)
}
// const handleDelete = (index: number, row: User) => {
//   console.log(index, row)
// }
const handleDelete = (index: number) => {
  console.log(index)
}

//搜索方法  v-mode  根据接口去使用什么方法
// const key=ref('');
// keyword 就是搜索框的value 关键字   所以这里是对象的原因 调用约束 前面已经约束好了
//const queryParams:IUserListParams = {   //然后发请求把这个直接丢给 定义的接口userListApi就可以了
const queryParams = reactive<IRoleListParams>({ //一定要加类型约束方便后期扩展 代表要传的类型就是IUserListParams
   keyword: "",  //这里使用ref定义的响应式数据  所以这里需要.value
   pageNum:1,
   pageSize:10
})

const reset = () => {
  queryParams.keyword = '';
  queryUserList();
};

// 把下面的加数据注释 这里从后端接口获取数据 进行格式化数据
const roleList = ref<IRoleListModel[]>([]);
// 定义请求数据的总数变量
const total = ref(0);
//封装请求用户列表数据
const queryUserList = () => {
  getRoleListApi (queryParams).then (res=>{ //  请求封装的接口 res就是返回的数据体
   //console.log('这里是请求用户列表后端的拿到的数据' + res)
   if (res.data.code === 200){
      //  console.log('这里是请求用户列表后端的拿到的数据' + res.data.info)
      roleList.value = res.data.data.list;
      total.value = res.data.data.total;
   }
  })
};
//请求一开始的默认数据
queryUserList();

//分页器
import type { ComponentSize } from 'element-plus'
import EditRole from './components/editRole.vue';
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)


</script>

<style lang="less" scoped>
// 表格居中 这样的话表头没有居中 所以在单个列中设置居中：
:deep(.align-c ){
  .cell {
    text-align: center;
  }
}

.serch-box{
  box-shadow: 0 0 4px 2px #ccc;
  border-radius: 10px;
  padding: 20px;
  .row{
    padding: 20px;
    display: flex;
    &:first-child{
      justify-content: space-around;
    }
    &:last-child{
      width: 500px;
      span {
        margin-right: 20px;

      }
    }
  }
  .title{
    display: inline-block;
    width: 100px;
    text-align: right;
  }
}
.table-box {
  box-shadow: 0 0 4px 2px #ccc;
  border-radius: 10px;
  margin-top: 20px;
  .el-table{
    width: 100%;
  }
  .el-pagination{
    //分页的样式
    padding: 20px;
    display: flex;
    justify-content: flex-end;
  }
  // .el-pagination.is-background .el-pager li:not(.disabled).active {
  //   background-color: #fc1717;
  //   color: #fff;
    
  // }
}

// .demo-pagination-block + .demo-pagination-block {
//   margin-top: 10px;
  
// }
// .demo-pagination-block .demonstration {
//   margin-bottom: 16px;
// }
</style>